<template>
  <van-tabbar v-model="currentTabItem" active-color="#6600CC" inactive-color="#676869">
    <van-tabbar-item name="home" :to="{name: 'MemberIndex'}">
      <span>缘分</span>
      <template #icon="props">
        <i class="iconfont icon-icon-test" style="font-size: 22px;"/>
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="activity" :to="{name: 'ActivityIndex'}">
      <span>活动</span>
      <template #icon="props">
        <i class="iconfont icon-huodong" style="font-size: 22px;"/>
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="college" :to="{name: 'CollegeIndex'}">
      <span>学院</span>
      <template #icon="props">
        <i class="iconfont icon-xueyuan" style="font-size: 22px;"/>
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="message" :dot="newMsgAmount > 0" :to="{name: 'MessageIndex'}">
      <span>消息</span>
      <template #icon="props">
        <i class="iconfont icon-xiaoxi" style="font-size: 22px;"/>
      </template>
    </van-tabbar-item>

    <van-tabbar-item name="my" :to="{name: 'MyIndex'}">
      <span>我的</span>
      <template #icon="props">
        <i class="iconfont icon-wode" style="font-size: 22px;"/>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
  import Vue from 'vue';
  import {Tabbar, TabbarItem, Toast} from 'vant';
  import {chatMessageNewAmountUri} from "../../common/api";

  Vue.use(Tabbar).use(TabbarItem);
  export default {
    name: 'Tabbar',
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem
    },
    props: {
      active: {
        type: String,
        default: 'home'
      }
    },
    computed: {
      currentTabItem: function () {
        return this.active;
      }
    },
    data() {
      return {
        newMsgAmount: 0
      }
    },
    methods: {
      getNewAmount() {
        const that = this;
        const url = chatMessageNewAmountUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code == 0) {
            that.newMsgAmount = data.chat_message + data.system_notice;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      if(this.GLOBAL.userInfo) {
        this.getNewAmount();
      }
      this.EventBus.$on('OnUserLogined', () => {
        this.getNewAmount();
      });
      this.EventBus.$on('OnMessageReceived', (message) => {
        this.getNewAmount();
      });
      this.EventBus.$on('OnChatSessionConnect', (message) => {
        this.getNewAmount();
      });
    }
  };
</script>

<style>

</style>
